<template>
    	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
     <!-- 订单卡片项 -->
      <view class="order-card" v-for="(order, index) in props.orderList" :key="index" @click="navigationUrl({
          name:'common_orderDetail',
          params:{orderNo:order.orderNo}
      })">
        <!-- 第一行：订单号和订单状态 -->
        <view class="order-row row1">
          <!-- <view :class="['status-tag text11', order.statusClass]">{{ order.statusText }}</view> -->
          <view class="order-no text12">

            订单号：{{ order.orderNo }}</view>
            <wd-tag type="primary" mark ><text class="text10">{{ get_order_status_Text(order.status) }}</text></wd-tag>
            <!-- <text :class="['text11 tag-status', order.status]">{{ get_order_status_Text(order.status) }}</text> -->
        </view>

        <!-- 第二行：图片、服务信息和金额 -->
        <view class="order-row row2">
          <view class="product-image">
            <image :src="order.productImage" mode="aspectFill"></image>
          </view>

          <view class="product-info">
            <text class="service-name text12">{{ order.serviceName }}</text>
            <text class="product-model text11">{{ order.servicePhone }}</text>
          </view>

          <view class="order-amount">
            <text class="amount-label text11">金额</text>
            <text class="amount-value text11">¥{{ order.amount }}</text>
          </view>
        </view>

        <!-- 第三行：支付状态、订单时间和详情按钮 -->
        <view class="order-row row3">
          <text class="order-time text11">下单时间 : {{ order.createTime }}</text>
          <view v-if="props.type=='edit'">
                <text class="btn-item text11 btn-detail">详情</text>
                <text class="btn-item text11 btn-remove">删除</text>
          </view>

        </view>
      </view>
</template>

<script setup>
import {get_order_status_Text} from "@/utils/enmuText" 
	import {
		useFontSizeStore
	} from '@/stores/fontSizeStore';
	const fontSizeStore = useFontSizeStore();
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		defineProps
	} from "vue"
	
	// 路由实例 - 保留原逻辑
	const router = useRouter();
	const props = defineProps(["orderList","type"])
	   //type read 读取，type dit 删除，详情 ，type update
	const navigationUrl = (item) => {
        if(props.type && props.type!="read") return;
		router.push({
			name: "common_orderDetail",
			params: {
				id: item.id,
				name:item.name
			}
		})
	}
</script>

<style lang="less" scoped>


.processing {
  background-color: #1890ff;
}

.completed {
  background-color: #52c41a;
}

.returned {
  background-color: #fa8c16;
}

.unknown {
  background-color: #999;
}


    // 订单卡片
    .order-card {
      background-color: #fff;
      border-radius: 16rpx;
      padding: 20rpx;
      border: 1rpx solid #efefef;
      margin-bottom: 20rpx;

      // 订单行通用样式
      .order-row {
        display: flex;
        width: 100%;
        margin-bottom: 16rpx;
        align-items: center;

        &:last-child {
          margin-bottom: 0;
        }

        // 第一行：订单号和订单状态
        &.row1 {
          justify-content: space-between;
          padding-bottom: 16rpx;
          border-bottom: 1px solid #f5f5f5;

          .order-no {
            font-size: 26rpx;
            color: #333;
            // font-weight: 500;
          }
        }

        // 第二行：图片、服务信息和金额
        &.row2 {
          align-items: center;
          gap: 16rpx;
          padding: 10rpx 0;

          .product-image {
            width: 100rpx;
            height: 100rpx;
            border-radius: 8rpx;
            overflow: hidden;
            background-color: #f5f5f5;
            flex-shrink: 0;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .product-info {
            flex: 1;
            min-width: 0;

            .service-name {
              font-size: 26rpx;
              color: #333;
              font-weight: 500;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              margin-bottom: 6rpx;
            }

            .product-model {
              font-size: 22rpx;
              color: #666;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }

          .order-amount {
            flex-shrink: 0;
            text-align: right;
            min-width: 120rpx;

            .amount-label {
              font-size: 22rpx;
              color: #666;
              display: block;
            }

            .amount-value {
              font-size: 26rpx;
              color: #f5222d;
              font-weight: 600;
            }
          }
        }

        // 第三行：支付状态、订单时间和详情按钮
        &.row3 {
          justify-content: space-between;
          padding-top: 16rpx;
          border-top: 1px solid #f5f5f5;

          .order-time {
            font-size: 22rpx;
            color: #666;
            margin: 0 10rpx;
            flex: 1;
            text-align: left;
          }

          
        }
      }
    }
    .tag-status{
        padding: 5rpx;
        border-radius: 10rpx;
    }
  
  .btn-item{

        color:#fff;
        border-radius: 20rpx;
        padding: 3px 10px;
  }
  .btn-detail{
        background-color: #1890ff;
  }
   .btn-remove{
    background-color: #f5222d;
    margin-left: 15px;
   }

   
</style>